<template>
	<view class="min-max-input">
		<input class="input" @blur="handleMinPrice" type="number" :value="minValue==-1?null:minValue" placeholder-class="placeholder-class" placeholder="输入最低价"/>
		<text class="dash"></text>
		<input class="input" @blur="handleMaxPrice" type="number" :value="maxValue==-1?null:maxValue" placeholder-class="placeholder-class" placeholder="输入最高价"/>
	</view>
</template>
<script>
export default {
	name: '',
	props: {
		minValue: { type: Number, default: null },
		maxValue: { type: Number, default: null },
	},
	methods: {
		handleMinPrice(value){
			this.$emit('minBlur', value)
		},
		handleMaxPrice(value){
			this.$emit('maxBlur', value)
		},
	}
}
</script>
<style lang="less">
.min-max-input {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	.input{
		width: 204rpx;
		height: 64rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-size: 24rpx;
		color: #1B2431;
		background: #F1F4F9;
		border-radius: 39rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.placeholder-class{
		color: rgba(138, 149, 172, 0.3);
		text-align: center;
	}
	.dash{
		width:24rpx;
		height:1px;
		background: #E4EBF4;
		margin: 0 20rpx;          
	}
}
</style>